<template>
	<el-container style="height: 98vh; border: 1px solid #eee;background: #fff">
		<SideBar />
		<el-container>
			<el-header style="width: 95%;margin-top: 10px;">
				<HeadBar />
			</el-header>
			<el-main id="main">
				<div class="timetable">
					<div class="toolbar">
						<el-select v-model="term" placeholder="请选择学期" size="small">
							<el-option label="2024 - 2025学年第1学期" value="1" />
							<el-option label="2024 - 2025学年第2学期" value="2" />
							<el-option label="2025 - 2026学年第1学期" value="3" />
							<el-option label="2025 - 2026学年第2学期" value="4" />
							<el-option label="2026 - 2027学年第1学期" value="5" />
							<el-option label="2026 - 2027学年第2学期" value="6" />
						</el-select>
						<el-button size="small" type="primary" icon="el-icon-search"
							@click="fetchCourses">查询</el-button>
						<el-button size="small" icon="el-icon-printer" @click="printTable">打印</el-button>
					</div>

					<el-card class="box-card">
						<div class="title">节次方案课程表</div>
						<el-table :data="tableData" border style="width: 100%"
							:header-cell-style="{ background: '#E6F0FA', color: '#333' }" :cell-style="cellStyle"
							:span-method="mergeCells">
							<el-table-column prop="label" label="节次/星期" width="120" fixed>
								<template slot-scope="scope">
									<div>{{ scope.row.label }}</div>
									<div class="time">{{ scope.row.time }}</div>
								</template>
							</el-table-column>

							<el-table-column v-for="(day, index) in days" :key="day" :label="day" align="center">
								<template slot-scope="scope">
									<div v-html="courses[index + 1][scope.$index]"
										:class="['course-cell', { 'has-course': courses[index + 1][scope.$index] }]">
									</div>
								</template>
							</el-table-column>
						</el-table>
					</el-card>
				</div>
			</el-main>
		</el-container>
	</el-container>
</template>

<script>
import SideBar from '@/components/SideBar.vue'
import HeadBar from '@/components/HeadBar.vue'
import request from '@/utils/request';

export default {
	components: { SideBar, HeadBar },
	data() {
		return {
			term: '',
			days: ['星期一', '星期二', '星期三', '星期四', '星期五', '星期六', '星期日'],
			tableData: [
				{ label: '第一节', time: '08:00~08:50' },
				{ label: '第二节', time: '09:00~09:50' },
				{ label: '第三节', time: '10:10~11:00' },
				{ label: '第四节', time: '11:10~12:00' },
				{ label: '第五节', time: '14:00~14:50' },
				{ label: '第六节', time: '15:00~15:50' },
				{ label: '第七节', time: '16:10~17:00' },
				{ label: '第八节', time: '17:10~18:00' },
				{ label: '第九节', time: '19:00~19:50' },
				{ label: '第十节', time: '20:00~20:50' },
			],
			courses: {
				1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {}
			}
		};
	},
	methods: {
		fetchCourses() {
			const studentId = sessionStorage.getItem('studentId');
			request.get('/courses/getCourses?studentId=' + studentId + (this.term === '' ? '&grade=1' : '&grade=' + this.term)).then((response) => {
				const courseMap = { 1: {}, 2: {}, 3: {}, 4: {}, 5: {}, 6: {}, 7: {} };
				const list = response.data.data;
				list.forEach((item) => {
					const day = item.weekday;
					const content = `<strong>${item.coursename}</strong><br>${item.teacher}<br>${item.room}`;
					for (let i = item.startTime - 1; i < item.endTime; i++) {
						courseMap[day][i] = content;
					}
				});
				this.courses = courseMap;
				this.$message.success('课程数据加载成功');
			}).catch((error) => {
				console.error(error);
				this.$message.error('课程数据加载失败');
			});
		},
		mergeCells({ rowIndex, columnIndex }) {
			if (columnIndex === 0) return [1, 1];
			const day = columnIndex;
			const slot = rowIndex;
			const content = this.courses[day]?.[slot];
			if (!content) return [1, 1];
			let rowspan = 1;
			for (let i = slot + 1; i < this.tableData.length; i++) {
				if (this.courses[day]?.[i] === content) {
					rowspan++;
				} else {
					break;
				}
			}
			for (let i = slot - 1; i >= 0; i--) {
				if (this.courses[day]?.[i] === content) {
					return [0, 0];
				} else {
					break;
				}
			}
			return [rowspan, 1];
		},
		cellStyle({ rowIndex, columnIndex }) {
			if (columnIndex === 0) {
				return { textAlign: 'center', verticalAlign: 'middle' };
			}
			const day = columnIndex;
			const content = this.courses[day]?.[rowIndex];
			if (content) {
				return {
					background: '#dceeff',
					borderRadius: '10px',
					color: '#1f4788',
					textAlign: 'center',
					verticalAlign: 'middle',
					fontWeight: '500'
				};
			}
			return { textAlign: 'center', verticalAlign: 'middle' };
		},
		printTable() {
			window.print();
		},
	},
	mounted() {
		this.fetchCourses();
	}
}
</script>

<style scoped>
#main {
	width: 95%;
	margin-top: 30px;
	align-items: center;
	box-shadow: 0 2px 12px 0 rgba(0, 0, 0, 0.1);
	margin-left: 50px
}

.timetable {
	padding: 20px;
	font-family: "Microsoft YaHei", sans-serif;
}

.toolbar {
	margin-bottom: 15px;
}

.title {
	font-size: 18px;
	font-weight: bold;
	margin-bottom: 10px;
	color: #2a6dbb;
}

.time {
	font-size: 12px;
	color: #666;
}

.course-cell {
	white-space: pre-wrap;
	line-height: 1.4;
	font-size: 13px;
	color: #1f4788;
	text-align: center;
}

.course-cell.has-course {
	background-color: #dceeff;
	border-radius: 4px;
	padding: 4px 2px;
}

.footer {
	margin-top: 20px;
	text-align: right;
	font-size: 14px;
	color: #333;
}
</style>
